<template>
  <h2>AboutView</h2>
  <label>
    Search: <input v-model.trim="search" maxlength="20">
  </label>
</template>


<!-- 对于组合式 API，我们不能通过 this 访问组件实例，所以 Vue-Router 给我们提供了一些组合式函数 -->
<!-- useRouter() 和 useRoute()-->
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    router.replace({ query: { search } })
  }
})
</script>
